<template>
  <el-main>
    <div class="container">
      <Tag :list="tagList" />
      <el-row type="flex" class="content" style="padding:0 20px">
        <el-col :span="4" style="margin:10px 4px" v-for="(work,index)  in page.list" :key="index">
          <el-card :body-style="{ padding: '0px' } " shadow="hover">
            <nuxt-link class="info" :to="'/work/'+work.id">
              <img :src="work.coverImage" class="image" />
            </nuxt-link>
            <div style="padding: 14px;">
              <span>{{work.title}}</span>
              <span :class="(work.score)>90?'scope_01':'scope_02'">{{work.score/10}}</span>
              <div class="bottom clearfix">
                <el-tag
                  size="mini"
                  type="info"
                  style="margin-right:2px"
                  v-for="(x,index2) in work.tagList"
                  :key="index2"
                >{{x.udxName}}</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row>
        <el-col class="page">
          <el-pagination
            :total=" page.total"
            background
            layout="prev, pager, next"
            @current-change="currentChange"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </el-main>
</template>

<script>
import Tag from "~/components/search/Tag.vue";

export default {
  components: {
    Tag
  },
  data() {
    return {
      pageIndex: 0,
      pageTotal: 10
    };
  },
  async asyncData({
    app,
    $axios,
    isDev,
    route,
    store,
    env,
    params,
    query,
    req,
    res,
    redirect,
    error
  }) {
    let result1Data;
    let result2Data;
    store.commit("search/tag", route.params.id);
    let [result1, result2] = await Promise.all([
      $axios.get(
        "/api/work/search?tag=" +
          store.state.search.active.tag +
          "&update=" +
          store.state.search.active.update +
          "&face=" +
          store.state.search.active.face +
          "&sort=" +
          store.state.search.active.sort
      ),
      $axios.get("/api/tag?sort=idxOrder&sortType=asc")
    ]);

    {
      let { status, data } = result1;
      result1Data = data;
    }
    {
      let { status, data } = result2;
      result2Data = data;
    }
    return {
      page: result1Data,
      tagList: result2Data
    };
  },

  computed: {
    queryUrl() {
      return (
        "/api/work/search?tag=" +
        this.tag +
        "&update=" +
        this.update +
        "&face=" +
        this.face +
        "&sort=" +
        this.sort +
        "&page=" +
        this.pageIndex +
        "&size=30"
      );
    },
    sort() {
      return this.$store.state.search.active.sort;
    },
    update() {
      return this.$store.state.search.active.update;
    },
    tag() {
      return this.$store.state.search.active.tag;
    },
    face() {
      return this.$store.state.search.active.face;
    }
  },

  methods: {
    async currentChange(index) {
      this.pageIndex = index;
      changeTag();
    },
    async changeTag() {
      let { status, data } = await this.$axios.get(this.queryUrl);
      this.page = data;
      console.log(this.page);
    }
  },
  watch: {
    update: function(old, newx) {
      this.changeTag();
    },
    tag: function(old, newx) {
      this.changeTag();
    },
    face: function(old, newx) {
      this.changeTag();
    }
  }
};
</script>

<style  scoped>
.content {
  padding: 20px 20px;
}
.page {
  display: flex;
  justify-content: flex-end !important;
  padding: 0 40px;
}
.info {
  color: #999;
  text-decoration: none;
}
.scope_01 {
  color: #e1251b;
}
.scope_02 {
  color: #ff9a6a;
}
.el-row {
  padding: 2px 0px;
}

.more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.more a {
  color: #e1251b;
  text-decoration: none;
}
.content {
  padding: 40px 10px;
}
.el-col {
  display: flex;
  justify-content: center;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>